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Animation with 
JavaScript 


¢ Animation is the movement of static 
images to create the effect of 
movement 


¢ Animation can be used to dynamically 
move objects in the user interface 

¢ We can leverage JavaScript to create 
pretty powerful animations 


Creating Animations 


Awesome HTML-based examples of Animations: 
https://msdn.microsoft.com/en-us/library/windows/apps/hh465165.aspx 


Great article on MSDN about animations (it’s long!): 
https://msdn.microsoft.com/en-us/library/windows/desktop/dn/42481.aspx 
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Manipulating the Canvas 


¢ Recall that the canvas element is used to create a container 
for graphics 

¢ With JavaScript, you can manipulate the container and draw 
graphics dynamically 

¢ To draw a canvas object, you use the getElementById( ) 
function to access the canvas and the canvas.getContext to 
create the object 


Canvas Demo 


<body> 

<canvas id="myCanvas" width="400" height="100" 
style="border:3px solid #c3c3c3;"> 

Your browser does not support the canvas element. 
</canvas> 


<script type="text/javascript"> 
var c=document.getElementBylId("myCanvas") ; 
var ctx=c.getContext ("2d"); 
ctx. fillStyle="Blue"; 
ctx. fillRect(5,5,150,75); 
</script> 
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</body> 
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Sending and Receiving Data 


Creating robust interactive applications requires the ability to 
send and receive data 

For this to happen, mobile applications and HTML Web pages 
have to communicate with servers where data is stored 

¢ A user’s computer is commonly called a “client” 

JavaScript makes the creation of such programs possible 


CLIENT 


The XMLHttpRequest API 


Uses JavaScript to pass data In 
the form of text strings between 
a client and server 

° HTML = text strings!!! 

Check out the syntax for the 
load function to the right and 
note the following: 

° xhr is anew XMLHttpRequest object 


¢ the open method specifies the HTTP 
method for contacting the server and 
provides the server’s Web address 

¢ the callback function gets a response from 
the server 


e the send method sends the data 


JavaScrip 


function load(ur t 
callback) { 

var xhr = new 
XMLHttpRequest ( ) ; 

xhr.open( "GET", url, true); 

xhr.onload = function() { 


callback(xhr.responseText) ; 


xhr.send(data) ; 


Parsing 


¢ When you send and receive data, you have to parse which 
components will be used 
¢ Parsing is the analysis of complex information into its smaller parts 


¢ With JavaScript, you have a number of options for parsing data 


JavaScript Object Notation JSON) 


¢ JSON is a subset of JavaScript that is used to exchange JS 
objects with a server 
¢ It features two APIs: JSON.parse and JSON.stringify 
* When data is received from a server, the .parse API is used to read the data 
¢ When data Is sent by a client, the .stringify API is used to turn data into text strings 
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Validating 
Uploaded Files 


¢ With JavaScript you can load and save 
files from your computer 


¢ JavaScript can also be used to validate 
a file type 


* Example: Users should upload a .jpg 


file, but try to upload a .doc file 
instead 


AppCache for Offline Files 


Data can be stored locally when a user is offline using the 
Application Cache, or AppCache 

AppCache stores resources, such aS HTML, CSS, and JavaScript 
files, locally on a user’s machine 


° As a result, users can access Web pages and apps offline 


The cache manifest file dictates which type of information is 
stored offline 
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Validating User 
Input 


¢ Form input may be incorrect 
° Example: Users may forget the @ 
symbol in an email address 
¢ JavaScript can be used to perform 
client-side validation of form input 
¢ This occurs in the browser before a 
form is submitted 
¢ NOTE: With HTML5, client-side 
validation is performed based on the 
input type 


First Name 


Jane 


Last Name Please provide 
a valid email 


address. 
Email Addres 
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Cookies 


¢ Cookies are small text files that that Web sites save on your 
computer 
¢ They contain information about you and your preferences 
¢ With JavaScript you can store and retrieve information from 
cookies 
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